<template>
    <div>
        <ul class="note-box b-g-f clearfix" v-if="JSON.stringify(info) != '{}'">
            <li class="note-box-li clearfix">
                <span class="note-box-tit">备注名</span>
                <input class="note-box-input" v-model="info.name" type="text" placeholder="请输入备注名">
            </li>
            <li class="note-box-li clearfix">
                <span class="note-box-tit">电话</span>
                <input class="note-box-input" v-model="info.tel" type="text" placeholder="请填写联系方式">
            </li>
            <li class="note-box-li-textarea clearfix">
                <span class="note-box-tit">描述</span>
                <textarea class="note-box-textarea" v-model="info.remark" type="text" placeholder="请填写描述"></textarea>
            </li>
            <li class="note-box-li clearfix">
                <span class="zi-num"><em class="num-yixie">{{info.remark.length}}</em>/200</span>
            </li>
        </ul>
        <div class="button-note">
            <span class="button-note1" @click="$router.back(-1)">取消</span>
            <span class="button-note2" @click="setPatientRemark()">完成</span>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant'
export default {
    data(){
        return{
            info:{}
        }
    },
    mounted(){
        this.getPatientRemark()
    },
    methods:{
        // 患者详情
        getPatientRemark(){
            this.$api.dietitian.getPatientRemark({id:this.$route.query.id}).then(resp=>{
                if(resp.code == 1){
                    if(resp.data.id == 0){
                        resp.data.name = ''
                    }
                    this.info = resp.data
                    this.info.id = this.$route.query.id
                }
            })
        },
        // 保存患者备注
        setPatientRemark(){
            this.$api.dietitian.setPatientRemark(this.info).then(resp=>{
                if(resp.code == 1){
                    Toast('备注成功')
                    this.$router.back(-1)
                }else{
                    Toast(resp.msg)
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.note-box{
    margin-top: 30px;
    padding: 0 40px;
    .note-box-tit{
        line-height: 120px;
        color: #666;
        float: left;
        width: 140px;
    }
    .note-box-li{
        height: 120px;
        border-bottom:solid 2px #f5f5f5;
        font-size: 38px;
        .note-box-input{
            height: 110px;
            border: none;
            margin-left: 40px;
            width: calc(100% - 200px);
            float: left;
        }
        .zi-num{
            text-align: right;
            display: block;
            height: 80px;
            line-height: 80px;
            color: #ccc;
            .num-yixie{
                color: #5CA1EE;
            }
        }
    }
    .note-box-li-textarea{
        font-size: 38px;
        min-height: 500px;
        .note-box-textarea{
            padding-top: 30px;
            min-height: 500px;
            border: none;
            margin-left: 40px;
            width: calc(100% - 190px);
            float: left;
        }
    }
}
.button-note{
    text-align: center;
    margin: 80px auto;
    font-size: 38px;
    color: #fff;
    .button-note1{
        width: 300px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border-radius: 20px;
        background-color: #999;
        display: inline-block;
    }
    .button-note2{
        margin-left: 60px;
        width: 300px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border-radius: 20px;
        background-color: #5CA1EE;
        display: inline-block;
    }
}
</style>

